<template>
  <div class="channel-box">
    <div class="channel-cnt">
      <div class="title-box">
        <h3 class="title">请选择渠道</h3>
        <p class="tips">一旦选择 7天内不能再次更换</p>
      </div>
      <div class="channel-list" v-if="channelList.length">
        <div
          class="item scale-1px-bottom"
          v-for="(item,index) in channelList"
          :key="index"
          @click="changeChannel(item,index)"
        >
          <span :class="{'active': index===currentIndex}">{{item.channelName}}</span>
          <span class="free" v-if="item.freeFlag">免费券</span>
          <i class="iconfont icon-chat_register_Check" v-show="index===currentIndex"></i>
        </div>
      </div>
      <div class="no-channel" v-else>
        <img src="../../assets/img/market/classify/noask.png" alt />
        <p class="tips">暂无免费渠道，无法开通！</p>
      </div>
    </div>
    <div class="action-btn" @click="openMarket">确定</div>
  </div>
</template>

<script>
import marketService from 'SERVICE/marketService'
export default {
  data() {
    return {
      linkerId: '',
      openStatus: '',
      channelList: [],
      currentChannel: '',
      currentIndex: ''
    }
  },
  created() {
    this.linkerId = this.$route.query.linkerId
    this.openStatus = this.$route.query.openStatus || ''
    this.getChannelListByLinkerId()
  },
  methods: {
    // 获取渠道列表
    getChannelListByLinkerId() {
      marketService
        .getChannelListByLinkerId({ linkerId: this.linkerId })
        .then(res => {
          this.channelList = res || []
        })
        .catch()
    },
    // 选择渠道
    changeChannel(item, index) {
      this.currentChannel = item
      this.currentIndex = index
    },
    // 开通楼盘
    openMarket() {
      if (!this.currentChannel) {
        return this.$toast('请选择渠道!')
      }
      if (!this.currentChannel.freeFlag) {
        return this.$toast('渠道没有免费券，无法开通!')
      }
      if (this.openStatus === '2') {
        this.switchChannel()
      } else {
        marketService
          .newOpenLinker({ linkerId: this.linkerId })
          .then(res => {
            this.switchChannel()
          })
          .catch(err => {})
      }
    },
    // 切换渠道
    switchChannel() {
      marketService
        .switchChannel({
          linkerId: this.linkerId,
          newChannelId: this.currentChannel.channelId,
          oldChannelId: '',
          switchingReason: ''
        })
        .then(res => {
          this.changeCacheStatus()
          this.$toast('楼盘开通成功!')
          this.$router.go(-1)
        })
        .catch()
    },
    // 改变缓存数据状态
    changeCacheStatus() {
      let data = JSON.parse(window.sessionStorage.getItem('marketList'))
      if (data) {
        let _this = this
        data.marketList.forEach(el => {
          if (el.linkerId === this.linkerId) {
            el.openStatus = 2
          }
        })
        window.sessionStorage.setItem('marketList', JSON.stringify(data))
      }
    }
  }
}
</script>

<style lang="less" scoped>
.channel-box {
  font-size: 16px;
  color: #13284d;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  .channel-cnt {
    flex: 1;
    overflow-y: scroll;
    .title-box {
      padding: 24px 16px;
      .title {
        font-size: 20px;
        font-weight: 600;
        line-height: 32px;
      }
      .tips {
        height: 16px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(234, 77, 46, 1);
        line-height: 16px;
        margin-top: 2px;
      }
    }
    .channel-list {
      margin: 0 16px;
      .item {
        height: 56px;
        display: flex;
        align-items: center;
        .active {
          color: #007ae6;
        }
        .iconfont {
          color: #007ae6;
          font-size: 24px;
          margin-left: auto;
        }
        .free {
          background-color: rgba(234, 77, 46, 1);
          color: #fff;
          font-size: 10px;
          margin-left: 10px;
          border-radius: 2px;
          padding: 2px 5px;
          margin-top: 2px;
        }
      }
    }
    .no-channel {
      text-align: center;
      padding-top: 100px;
      img {
        width: 80px;
        height: 80px;
      }
      .tips {
        font-size: 14px;
        font-weight: 400;
        color: rgba(156, 165, 181, 1);
        padding-top: 16px;
      }
    }
  }
  .action-btn {
    height: 44px;
    background: rgba(0, 122, 230, 1);
    border-radius: 6px;
    line-height: 44px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    margin: 24px 16px;
  }
}
</style>
